<template>
	<view class="top-info">
		<view class="top f">
			<image class="uhead" src="../../static/test/head.png" mode="scaleToFill"></image>
			<view class="tu f-ajc">
				<view class="uname">非阿斯顿</view>
				<view class="uage iconfont icon-boy"> 20 </view>
			</view>
			<view class="guanzhu f-ajc">+关注</view>
		</view>
		<view class="f-jsb fb">
			<view>
				<view>10k</view>
				<view>获赞</view>
			</view>
			<view>
				<view>11</view>
				<view>关注</view>
			</view>
			<view>
				<view>12</view>
				<view>粉丝</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style scoped>

	.top {
		position: relative;
		width: 100%;
		height: 450rpx;
		background-image: url("http://c.hiphotos.baidu.com/zhidao/pic/item/bd3eb13533fa828b7c3e7a51f91f4134970a5a67.jpg");
		background-size:cover;
		background-repeat: no-repeat;
		justify-content: center;
	}
	.top > image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 100%;
		top: 100rpx
	}
	
	.top > image, .tu , .guanzhu {
		position: absolute;
		
	}
	
	.tu {
		top: 280rpx
	}
	
	.uname {
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 700;
		margin-right: 10rpx;
	}
	
	
	.uage {
		background-color: #51A8F8;
		border: 1rpx solid #FFFFFF;
		color: #FFFFFF;
		font-size: 18rpx;
		padding: 2rpx 8rpx;
		border-radius: 20rpx;
	}
	
	.guanzhu{
		background-color: #FDE030;
		color: #6C6B6C;
		width: 110rpx;
		height: 50rpx;
		bottom: 40rpx;
		border-radius: 10rpx;
		font-size: 26rpx;
	}
	
	.fb {
		margin-top: 15rpx;
		margin-bottom: 15rpx;
	}
	
	.fb > view {
		flex: 1;
		text-align: center;
		background-color: #FFFDFF;
	}
	.fb > view  > view:first-child{
		font-weight: 700;
		font-size: 26rpx;
	}
	
	.fb > view  > view:last-child{
		color: #C4C3C5;
		font-size: 24rpx;
	}
	.top-info {
		border-bottom: 16rpx solid #F5F4F5;	
	}
</style>
